<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Tests for jQuery Create DOM Nodes plugin</title>
        <script type="text/javascript" src="jquery-latest.js"></script>
        <script type="text/javascript" src="jquery.createdomnodes.js"></script>
        <script type="text/javascript">
var TeamList = {

    // Templating
    addNode: function(member) {
        $._li()
            ._div({"class": "maininfo"})
                ._if_(true, $
                    ._append_(member.firstname)
                    ._span({"class": "lastname"}).text(member.lastname).span_()
                    ._append_("(")
                    ._a().text(member.email).click(TeamList.onMailClick).a_()
                    ._append_(")")
                , $ // else
                    ._append_("erreur")
                )
            .div_()
            ._div({"class": "moreinfo"}).text(member.infos).div_()
        .li_()
        ._appendTo_("#teamlist");
    },
    addNode2: function(member) {
        $("#teamlist")
        ._li()
            ._div({"class": "maininfo"})
                ._append_(member.firstname)
                ._span({"class": "lastname"}).text(member.lastname).span_()
                ._append_("(")
                ._a().text(member.email).click(TeamList.onMailClick).a_()
                ._append_(")")
            .div_()
            ._div({"class": "moreinfo"}).text(member.infos).div_()
        .li_();
    },

    // Events
    onMailClick: function () {
        MailPopup.open(); // We can imagine this way.
    },

    // Initializations
    init: function() {
        TeamList.addNode({
            firstname: "John",
            lastname: "Doe",
            email: "john.doe@mail.com",
            infos: "Project manager"
        });
        TeamList.addNode2({
            firstname: "John2",
            lastname: "Doe2",
            email: "john2.doe2@mail.com",
            infos: "Project manager2"
        });
    }

};

$(document).ready(TeamList.init);

        </script>
    </head>
    <body>
        <ul id="teamlist"></ul>
    </body>
</html>
